<template>
  <el-dialog v-model="dialogFormVisible" title="修改密码" width="500">
    <el-input placeholder="密码:" v-model="userPassWord" />
    <el-button style="margin-top: 15px" type="primary" @click="userPassWordClick"
      >提交</el-button
    >
  </el-dialog>

  <!-- 页面布局 -->
  <div>
    <link rel="icon" />
    <el-container>
      <el-header style="height: 42px; z-index: 3000">
        <div style="background-color: #545c64; color: #fff">
          <el-menu
            :default-active="activeIndex"
            mode="horizontal"
            :ellipsis="false"
            @select="handleSelect"
            background-color="#545c64"
            text-color="#fff"
            active-text-color="#ffd04b"
            style="height: 42px; display: flex; align-items: flex-start"
          >
            <el-menu-item
              index="0"
              style="flex-shrink: 0; display: flex; align-items: flex-start; padding: 0"
            >
              <img
                style="width: 96px; height: 42px"
                src="../../public/index/hs.png"
                alt="hs logo"
              />
            </el-menu-item>

            <div class="flex-grow" />
            <el-dropdown @command="handleCommand">
              <div class="block">
                <img
                  :style="{
                    width: '42px',
                    height: '42px',
                    borderRadius: '50%',
                  }"
                  :src="circleUrl"
                  alt="user avatar"
                />
              </div>

              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item command="b">修改密码</el-dropdown-item>
                  <!-- <el-dropdown-item command="a"></el-dropdown-item> -->
                  <el-dropdown-item command="a">退出登录</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </el-menu>
        </div>
      </el-header>
      <el-container>
        <el-header
          :style="{
            width: elTabsWidth,
            height: '42px',
            'z-index': '3000',
            'margin-left': '96px',
            'background-color': elTabsColor,
            position: 'fixed',
            top: '0px',
          }"
        >
          <!-- closable -->
          <el-tabs
            v-model="editableTabsValue"
            type="card"
            class="demo-tabs"
            closable
            @tab-click="handleTabClick"
            @tab-remove="removeTab"
          >
            <el-tab-pane
              v-for="item in editableTabs"
              :key="item.name"
              :label="item.title"
              :name="item.name"
            >
              <!-- {{ item.content }} -->
            </el-tab-pane>
          </el-tabs>
        </el-header>
      </el-container>
      <keep-alive :include="cachedComponents">
        <component :is="currentComponent" />
      </keep-alive>
      <el-container>
        <el-aside
          :style="{
            position: 'absolute',
            top: '42px',
            left: '0',
            width: '6rem',
            height: dynamicHeight,
            display: 'flex',
            flexDirection: 'column',
            'z-index': '3000',
          }"
        >
          <el-row
            style="height: 100%; background-color: #f0f0f0; border-right: 1px solid #ccc"
          >
            <el-col>
              <!-- :collapse="true" -->
              <el-menu
                default-active="1"
                @open="handleOpen"
                :style="{
                  maxHeight: '100%',
                  width: '100%',
                  overflowY: 'auto',
                  border: '0',
                  'background-color': 'rgb(211, 227, 253)',
                }"
              >
                <template v-for="(menuItem, index) in menuData">
                  <el-menu-item
                    :index="menuItem.index"
                    :menuName="menuItem.menuName"
                    @click="handleItemClick(menuItem)"
                  >
                    <template v-if="menuItem.children && menuItem.children.length > 0">
                      <el-popover
                        placement="right"
                        :popper-style="{
                          height: '100%',
                          width: '200px',
                          position: 'fixed',
                          left: 'calc(6rem)',
                          top: '42px',
                          overflowY: 'auto',
                        }"
                        v-if="menuItem.children.length > 0"
                      >
                        <template v-slot:reference>
                          <div @mouseover="handlePopoverOpen" style="width: 100%">
                            {{ menuItem.title }}
                          </div>
                        </template>
                        <div>
                          <div
                            v-for="(subMenuItem, subIndex) in menuItem.children"
                            :key="subIndex"
                            @click="handleItemClick(subMenuItem)"
                            class="submenu-item2"
                          >
                            <div style="display: flex; align-items: center">
                              <svg
                                t="1709087540006"
                                class="icon"
                                viewBox="0 0 1024 1024"
                                version="1.1"
                                xmlns="http://www.w3.org/2000/svg"
                                p-id="2970"
                                width="32"
                                height="32"
                              >
                                <path
                                  d="M515 504m-278 0a278 278 0 1 0 556 0 278 278 0 1 0-556 0Z"
                                  fill="#34BCF7"
                                  p-id="2971"
                                ></path>
                                <path
                                  d="M246.05 574.6s2.76-53.69 58.36-70.65C304.41 504 328 496 338 523a35.27 35.27 0 0 1-13 36s-21 20-7 44c0 0 28 41 101 30 0 0 148-20 117 91 0 0-17 51-80.05 51.71 0.05 0-159.85-20.52-209.9-201.11zM709 305s-103.35 30.11-78.18 120.56c0 0 13.18 55.44 63 83 0 0 40.22 19.47 40.22 54.47 0 0 8 30-26 68 0 0-25 28 15.89 56.44C723.89 687.44 896 500 709 305z"
                                  fill="#64D7FF"
                                  p-id="2972"
                                ></path>
                                <path
                                  d="M667.21 271.34a279.55 279.55 0 0 1 73.06 69.73 153.54 153.54 0 0 1 33.33 10.51c16.83 7.77 28 18 33.14 30.28 5.16 12.32 4.59 27.41-1.68 44.86-7.23 20.11-21.94 42.63-42.56 65.12-45.9 50.16-116.17 96.53-197.86 130.73C488 654.66 410.75 672 345.41 672c-4.3 0-8.56-0.08-12.75-0.23-30.49-1.1-56.86-6.42-76.26-15.38-16.83-7.77-28-18-33.14-30.28s-4.59-27.41 1.68-44.86a153.49 153.49 0 0 1 15.89-31.09 280.34 280.34 0 0 1 1.58-101c-8.07 7.57-15.71 15.26-22.84 23-58.07 63.39-78.06 127-56.27 179s81.11 82.42 167 85.52q7.35 0.27 14.87 0.27c73.94 0 160.11-19.14 244.56-54.5 90.19-37.76 168.56-89.88 220.69-146.77 58.07-63.39 78.06-127 56.27-179s-81.11-82.42-167-85.52a303.54 303.54 0 0 0-32.48 0.18zM719.85 337.86z"
                                  fill="#FED54A"
                                  p-id="2973"
                                ></path>
                              </svg>
                              <el-text size="large">{{ subMenuItem.title }}</el-text>
                            </div>
                            <div
                              v-if="
                                subMenuItem.children && subMenuItem.children.length > 0
                              "
                            >
                              <div class="sub-sub-menu">
                                <div
                                  v-for="(
                                    subSubMenuItem, subSubIndex
                                  ) in subMenuItem.children"
                                  :key="subSubIndex"
                                  @click="handleItemClick(subSubMenuItem)"
                                  class="submenu-item3"
                                >
                                  <el-text size="small" type="primary"
                                    >{{ subSubMenuItem.title }}
                                  </el-text>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </el-popover>
                    </template>
                    <el-text v-else>{{ menuItem.title }} </el-text>
                  </el-menu-item>
                </template>
              </el-menu>
            </el-col>
          </el-row>
        </el-aside>

        <!-- 切换的子组件 -->
      </el-container>
    </el-container>
  </div>
</template>
<script setup lang="ts">
import {
  ref,
  watch,
  reactive,
  onMounted,
  onBeforeMount,
  computed,
  nextTick,
  onUnmounted,
  toRefs,
} from "vue";
import { ElTable, TableColumnCtx } from "element-plus";
import { Delete, Edit, Search, Share, Upload, Calendar } from "@element-plus/icons-vue";
import { ElButton, ElDialog, dialogEmits, ElMessage } from "element-plus";
import { CircleCloseFilled } from "@element-plus/icons-vue";
import { useRouter } from "vue-router";
import axios from "../axios/axiosInstance";
import Cookies from "js-cookie";
import { formatNumberToCurrency } from "@/utils/formatUtils";
import Purposes from "../purposes/Purposes.vue";
import AssistDemand from "../purposes/AssistDemand.vue";
import AssistDosage from "../purposes/AssistDosage.vue";
import AssistMaterialDetails from "../purposes/AssistMaterialDetails.vue";
import Material from "../purposes/Material.vue";
import MaterialsFixed from "../purposes/MaterialsFixed.vue";
import UserInformation from "../purposes/admin/UserInformation.vue";
import RoleInformation from "../purposes/admin/RoleInformation.vue";
import MenuMaintenance from "../purposes/admin/MenuMaintenance.vue";
import ButtonInformation from "../purposes/admin/ButtonInformation.vue";

//材质
import MaterialQuality from "../purposes/MaterialQuality.vue";
import K3wh from "../views/mc/K3wh.vue";
import Dejz from "../views/mc/Dejz.vue";
import MoXiao from "../views/mc/MoXiao.vue";
import Hc from "../views/mc/Hc.vue";
import Abnormal from "../views/mc/Abnormal.vue";
import Home from "../purposes/Home.vue";
import CS from "../purposes/CS.vue";
import DemoText from "../purposes/DemoText.vue";
import Test from "../views/mc/Test.vue";
import Test1 from "../views/mc/Test1.vue";
import Test2 from "../views/mc/Test2.vue";
import XXX from "../views/mc/XXX.vue";
import Demo from "../purposes/Demo.vue";
import SysParameters from "../views/mc/SysParameters.vue";
import SysStatus from "../views/mc/SysStatus.vue";
import DataStructure from "../views/mc/DataStructure.vue";
import BusinessFy from "../views/fY/BusinessFy.vue";

// 零部件管理
import BusinessType from "../views/PartsManagement/BusinessType.vue";
import TeamManagement from "../views/PartsManagement/TeamManagement.vue";
import ComponentItemClassification from "../views/PartsManagement/ComponentItemClassification.vue";
import BusinessDepartmentType from "../views/PartsManagement/BusinessDepartmentType.vue";
import BusinessProjectTypeMapping from "../views/PartsManagement/BusinessProjectTypeMapping.vue";
import EquipmentBasicInfo from "../views/PartsManagement/EquipmentBasicInfo.vue";

import BusinessMatterClassification from "../views/fY/BusinessMatterClassification.vue";
import BusinessMatterBasicInfo from "../views/fY/BusinessMatterBasicInfo.vue";
import ComponentCategory from "../views/ComponentMechanical/ComponentCategory.vue";
import ParameterClassification from "../views/PartsManagement/ParameterClassification.vue";
import ParameterItemTable from "../views/PartsManagement/ParameterItemTable.vue";
import BusinessProjectParameterItemMapping from "../views/PartsManagement/BusinessProjectParameterItemMapping.vue";

// 设备结构
import EquipmentStructure from "../views/Equipment/EquipmentStructure.vue";
import BusinessDimensionConfiguration from "../views/Equipment/BusinessDimensionConfiguration.vue";
import ComponentSingleRegistrationTable from "../views/PartsManagement/ComponentSingleRegistrationTable.vue";
import SingleRegistrationTable from "../views/ComponentMechanical/SingleRegistrationTable.vue";
import SingleRegistration from "../views/ComponentMechanical/SingleRegistration.vue";
import ComponentGroupSetting from "../views/Equipment/ComponentGroupSetting.vue";
import ComponentGroupUpdate from "../views/Equipment/ComponentGroupUpdate.vue";
import ComponentSingleStatus from "../views/ComponentMechanical/ComponentSingleStatus.vue";
import Equipmentoperation from "../views/Equipment/Equipmentoperation.vue";
import PartSingleRegister from "../views/EM/partRegt/PartSingleRegister.vue";
// 结构测试
import EqDemo from "../views/Equipment/EqDemo.vue";

// 工艺标准
import GrindingProcessStandard from "../views/ProcessStandard/GrindingProcessStandard.vue";
import ReplaceProcessStandards from "../views/ProcessStandard/ReplaceProcessStandards.vue";
import ProductRollerRoughnessSettingMainController from "../views/ProcessStandard/ProductRollerRoughnessSettingMainController.vue";

import WorkOrderPlan from "../views/ComponentMechanical/WorkOrderPlan.vue";
import GrindingWorkOrder from "../views/Equipment/GrindingWorkOrder.vue";
import OutsourcingResult from "../views/ComponentMechanical/OutsourcingResult.vue";
import OutsourcingStorage from "../views/ComponentMechanical/OutsourcingStorage.vue";
//异常/委外
import RepairApplication from "../views/ComponentMechanical/RepairApplication.vue";
import AbnormalApplication from "../views/ComponentMechanical/AbnormalApplication.vue";
import RepairOutsourcing from "../views/ComponentMechanical/RepairOutsourcing.vue";
//报表
import ItemReport from "../views/Report/ItemReport.vue";
import ItemReportDemo from "../views/Report/ItemReportDemo.vue";
import PartsListReport from "../views/Report/PartsListReport.vue";
import ComponentSingleReport from "../views/Report/ComponentSingleReport.vue";

//EM
import Send_back_t from "../views/EM/partRegt/Send_back_t.vue";
import SendBack from "../views/EM/partRegt/SendBack.vue";
import PartSingleInfo from "../views/EM/partRegt/PartSingleInfo.vue";
import PartSingleAlterInfo from "../views/EM/partRegt/PartSingleAlterInfo.vue";
import BaseRackAlter from "../views/EM/partRegt/BaseRackAlter.vue";

//wo_manage
import WOPlan from "../views/EM/wo_manage/WOPlan.vue";
import WoPalnDemo from "../views/EM/wo_manage/WoPalnDemo.vue";
import WoPlanInstall from "../views/EM/wo_manage/WoPlanInstall.vue";
import WoReportInstall from "../views/EM/wo_manage/WoReportInstall.vue";
import WoPlanUninstall from "../views/EM/wo_manage/WoPlanUninstall.vue";
import WoReportUninsta from "../views/EM/wo_manage/WoReportUninsta.vue";
import WOPlanGrind from "../views/EM/wo_manage/WOPlanGrind.vue";
import GrindRequest from "../views/EM/wo_manage/GrindRequest.vue";
import WOReportGrind from "../views/EM/wo_manage/WOReportGrind.vue";
import WoPlanGpd from "../views/EM/wo_manage/WoPlanGpd.vue"; //磨削工单计划调整

import BaseRack from "../views/EM/basic/BaseRack.vue"; //放料架
import BasePartGroup from "../views/EM/basic/BasePartGroup.vue"; //零件编组

import WOTeamDuty from "../views/EM/wo_manage/WOTeamDuty.vue"; //班组签到

//维修
import RepairRequestInfo from "../views/EM/wo_manage/RepairRequestInfo.vue";
import RepairOutInfo from "../views/EM/wo_manage/RepairOutInfo.vue";
import RepairArrivalInfo from "../views/EM/wo_manage/RepairArrivalInfo.vue";

//委外 entrust
import EntrustRequest from "../views/EM/entrust/EntrustRequest.vue";
import EntrustOut from "../views/EM/entrust/EntrustOut.vue";
import EntrustArrival from "../views/EM/entrust/EntrustArrival.vue";
//异常
import NGRequest from "../views/EM/ng/NGRequest.vue";
import NGJudge from "../views/EM/ng/NGJudge.vue";
import NGSign from "../views/EM/ng/NGSign.vue";
import NGReviewPerson from "../views/EM/ng/NGReviewPerson.vue";
//报表
import PcbReport from "../views/EM/report/PcbReport.vue";
import PshoReport from "../views/EM/report/PshoReport.vue";
import PsrReport from "../views/EM/report/PsrReport.vue";
import GrindPoolFinish from "../views/EM/report/GrindPoolFinish.vue";
import GrindPool from "../views/EM/report/GrindPool.vue";
//工具
import QrCodeGeneration from "../views/EM/tool/QrCodeGeneration.vue";
//出售
import ScrapCharged from "../views/EM/sell/ScrapCharged.vue";
import ScrappedSale from "../views/EM/sell/ScrappedSale.vue";

//工单管理
import ProcessFlow from "../views/Process/ProcessFlow.vue";
import ProcessReport from "../views/Process/ProcessReport.vue";

// 日期中文
import zhCn from "element-plus/dist/locale/zh-cn.mjs";
import * as notifications from "../components/utils/notification.ts";

const cachedComponents = ref<string[]>([]);

const router = useRouter();
const currentComponent = ref(Home);
// const cs = () => {
//   currentComponent.value = Purposes;
// };
const selectMenu = () => {
  const userName = Cookies.get("userName");
  axios({
    url: "/select/Menu",
    method: "post",
    data: {
      userName: userName,
    },
  }).then((res) => {
    console.log(res);
    menuData.splice(0, menuData.length, ...res.data);
  });
};
selectMenu();
const menuData = reactive([]);

// 表头
const state = reactive({
  circleUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
  squareUrl: "https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png",
  sizeList: ["small", "", "large"] as const,
});
const activeIndex = ref("1");
const handleSelect = (key: string, keyPath: string[]) => {
  if (key == 0) {
    const tabName = "Home";
    const title = "Home";
    addTab(tabName, title);
    currentComponent.value = Home;
  }
};

// 退出登录
const userPassWord = ref("");
const dialogFormVisible = ref(false);
const handleCommand = (command: string | number | object) => {
  if (command == "a") {
    Cookies.remove("userName");
    router.push("/");
  }
  if (command == "b") {
    dialogFormVisible.value = true;
  }
};
const userPassWordClick = () => {
  const userName = Cookies.get("userName");
  axios({
    url: "/update/Admin/upUserPassWord",
    method: "post",
    data: {
      userName: userName,
      userPassWord: userPassWord.value,
    },
  }).then((res) => {
    if ((res.code = 200)) {
      dialogFormVisible.value = false;

      notifications.showMessage("修改成功", "success");
      return;
    }
    notifications.showMessage("修改失败", "erro");
  });
};

const { circleUrl, squareUrl, sizeList } = toRefs(state);
const removeComponent = (componentName) => {
  cachedComponents.value = cachedComponents.value.filter(
    (name) => name !== componentName
  );
};

// 页标签
let tabIndex = 0;
const editableTabsValue = ref("0");
const editableTabs = ref([]);
const elTabsColor = ref("");
const addTab = (name, title, content) => {
  elTabsColor.value = "#F0FFFF";
  const tabExists = editableTabs.value.some((tab) => tab.name === name);

  // 检查是否需要将"Home"标签添加到第一个位置
  if (name === "Home" && (!tabExists || editableTabs.value[0].name !== "Home")) {
    // 创建新的"Home"标签对象
    const homeTab = {
      title: title,
      name: name,
      content: content,
    };
    if (tabExists) {
      // 如果"Home"标签已存在，先移除旧的
      const index = editableTabs.value.findIndex((tab) => tab.name === name);
      editableTabs.value.splice(index, 1);
    }
    // 将"Home"标签添加到数组的第一个位置
    editableTabs.value.unshift(homeTab);
    // 设置当前激活的标签
    editableTabsValue.value = name;

    // 确保Home标签在cachedComponents中
    if (!cachedComponents.value.includes("Home")) {
      cachedComponents.value.push("Home");
    }
  } else if (!tabExists) {
    // 如果标签不存在，则添加到数组末尾
    editableTabs.value.push({
      title: title,
      name: name,
      content: "",
    });
    editableTabsValue.value = name;

    // 如果添加的标签不是Home，并且不在cachedComponents中，则添加
    if (name !== "Home" && !cachedComponents.value.includes(name)) {
      cachedComponents.value.push(name);
    }
  } else {
    // 如果已存在相同的页签，激活已存在的页签
    const existingTab = editableTabs.value.find((tab) => tab.name === name);
    if (existingTab) {
      editableTabsValue.value = existingTab.name;
    }
  }
};

const componentMapping = {
  Material: Material,
  Purposes: Purposes,
  MaterialsFixed: MaterialsFixed,
  AssistDemand: AssistDemand,
  AssistMaterialDetails: AssistMaterialDetails,
  AssistDosage: AssistDosage,
  UserInformation: UserInformation,
  RoleInformation: RoleInformation,
  MenuMaintenance: MenuMaintenance,
  ButtonInformation: ButtonInformation,
  K3wh: K3wh,
  Dejz: Dejz,
  MoXiao: MoXiao,
  Hc: Hc,
  Abnormal: Abnormal,
  Test: Test,
  XXX: XXX,
  Test1: Test1,
  CS: CS,
  DemoText: DemoText,
  Demo: Demo,
  Test2: Test2,
  BusinessType: BusinessType,
  TeamManagement: TeamManagement,
  ComponentItemClassification: ComponentItemClassification,
  SysParameters: SysParameters,
  SysStatus: SysStatus,
  DataStructure: DataStructure,
  BusinessFy: BusinessFy,
  MaterialQuality: MaterialQuality,
  BusinessMatterClassification: BusinessMatterClassification,
  BusinessMatterBasicInfo: BusinessMatterBasicInfo,
  BusinessDepartmentType: BusinessDepartmentType,
  BusinessProjectTypeMapping: BusinessProjectTypeMapping,
  ComponentCategory: ComponentCategory,
  ParameterClassification: ParameterClassification,
  EquipmentBasicInfo: EquipmentBasicInfo,
  ParameterItemTable: ParameterItemTable,
  BusinessProjectParameterItemMapping: BusinessProjectParameterItemMapping,
  BaseRack: BaseRack,
  BasePartGroup: BasePartGroup,
  WOTeamDuty: WOTeamDuty,
  EquipmentStructure: EquipmentStructure,
  BusinessDimensionConfiguration: BusinessDimensionConfiguration,
  ComponentSingleRegistrationTable: ComponentSingleRegistrationTable,
  SingleRegistrationTable: SingleRegistrationTable,
  SingleRegistration: SingleRegistration,
  ComponentGroupSetting: ComponentGroupSetting,
  ComponentGroupUpdate: ComponentGroupUpdate,
  ComponentSingleStatus: ComponentSingleStatus,
  GrindingProcessStandard: GrindingProcessStandard,
  ReplaceProcessStandards: ReplaceProcessStandards,
  ProductRollerRoughnessSettingMainController: ProductRollerRoughnessSettingMainController,
  Equipmentoperation: Equipmentoperation,
  PartSingleRegister: PartSingleRegister,
  EqDemo: EqDemo,
  WorkOrderPlan: WorkOrderPlan,
  GrindingWorkOrder: GrindingWorkOrder,
  OutsourcingResult: OutsourcingResult,
  OutsourcingStorage: OutsourcingStorage,
  AbnormalApplication: AbnormalApplication,
  RepairApplication: RepairApplication,
  RepairOutsourcing: RepairOutsourcing,
  ItemReport: ItemReport,
  ItemReportDemo: ItemReportDemo,
  PartsListReport: PartsListReport,
  ComponentSingleReport: ComponentSingleReport,
  Send_back_t: Send_back_t,
  SendBack: SendBack,
  PartSingleInfo: PartSingleInfo,
  PartSingleAlterInfo: PartSingleAlterInfo,
  BaseRackAlter: BaseRackAlter,
  RepairRequestInfo: RepairRequestInfo,
  RepairOutInfo: RepairOutInfo,
  RepairArrivalInfo: RepairArrivalInfo,
  WOPlan: WOPlan,
  WoPalnDemo: WoPalnDemo,
  WoPlanInstall: WoPlanInstall,
  WoReportInstall: WoReportInstall,
  WoPlanUninstall: WoPlanUninstall,
  WoReportUninsta: WoReportUninsta,
  WOPlanGrind: WOPlanGrind,
  GrindRequest: GrindRequest,
  WOReportGrind: WOReportGrind,
  WoPlanGpd: WoPlanGpd,
  EntrustRequest: EntrustRequest,
  EntrustOut: EntrustOut,
  EntrustArrival: EntrustArrival,
  NGRequest: NGRequest,
  NGJudge: NGJudge,
  NGSign: NGSign,
  NGReviewPerson: NGReviewPerson,
  PcbReport: PcbReport,
  PshoReport: PshoReport,
  PsrReport: PsrReport,
  GrindPoolFinish: GrindPoolFinish,
  GrindPool: GrindPool,
  QrCodeGeneration: QrCodeGeneration,
  ScrapCharged: ScrapCharged,
  ScrappedSale: ScrappedSale,
  ProcessFlow: ProcessFlow,
  ProcessReport: ProcessReport,
};
const removeTab = (targetName: string) => {
  console.log("删除的标签名:" + targetName);
  console.log("标签数组:" + cachedComponents.value);
  console.log("当前页标签的名称:" + currentComponent.value.__name);
  let length = cachedComponents.value.length;
  let index = cachedComponents.value.indexOf(targetName);
  //解决标签页删除时的调转
  if (targetName == currentComponent.value.__name) {
    if (length == 1) {
      currentComponent.value = Home;
      elTabsColor.value = "#545c64";
    } else {
      if (length - 1 == index) {
        index = index - 2;
      }
      const name = cachedComponents.value[index + 1];
      if (componentMapping[name]) {
        currentComponent.value = componentMapping[name];
      }
    }
  }

  const tabs = editableTabs.value;
  let activeName = editableTabsValue.value;
  if (activeName === targetName) {
    tabs.forEach((tab, index) => {
      if (tab.name === targetName) {
        const nextTab = tabs[index + 1] || tabs[index - 1];
        if (nextTab) {
          activeName = nextTab.name;
        }
      }
    });
  }
  editableTabsValue.value = activeName;
  editableTabs.value = tabs.filter((tab) => tab.name !== targetName);
  removeComponent(targetName);
};
// 点击页标签
const handleTabClick = (tab: any) => {
  if (tab.paneName == "Home") {
    currentComponent.value = Home;
    return;
  }
  const componentName = tab.paneName;
  if (componentMapping[componentName]) {
    currentComponent.value = componentMapping[componentName];
  }
};

// 侧边栏
const componentMappings = {
  "1-1-1": Purposes,
  "1-1-2": Material,
  "1-2-1": MaterialsFixed,
  "1-2-2": AssistDemand,
  "1-3-1": AssistMaterialDetails,
  "1-3-2": AssistDosage,
  "2-1-1": UserInformation,
  "2-1-2": RoleInformation,
  "2-1-3": MenuMaintenance,
  "2-1-4": ButtonInformation,
  "3-1-1": K3wh,
  "3-1-2": Dejz,
  "3-1-3": MoXiao,
  "3-1-4": Hc,
  "3-1-5": Abnormal,
  "4-1-1": XXX,
  "4-1-2": Test,
  "4-1-3": Test1,
  "4-1-4": CS,
  "4-1-5": DemoText,
  "4-1-6": Demo,
  "4-1-7": Test2,
  "5-1-1": BusinessType,
  "5-1-2": TeamManagement,
  "5-1-3": ComponentItemClassification,
  "5-1-4": BusinessDepartmentType,
  "5-1-5": ComponentCategory,
  "5-1-6": BusinessProjectTypeMapping,
  "5-1-7": EquipmentBasicInfo,
  "5-1-8": MaterialQuality,
  "5-1-9": BaseRack,
  "5-1-10": BasePartGroup,
  "5-3-1": SysStatus,
  "5-3-2": SysParameters,
  "5-3-3": DataStructure,
  "5-4-1": BusinessFy,
  "5-5-1": BusinessMatterClassification,
  "5-5-2": BusinessMatterBasicInfo,
  "5-5-3": ParameterClassification,
  "5-5-4": ParameterItemTable,
  "5-5-5": BusinessProjectParameterItemMapping,
  "6-1-1": EquipmentStructure,
  "6-1-2": BusinessDimensionConfiguration,
  "6-1-3": EqDemo,
  "6-2-1": ComponentSingleRegistrationTable,
  "6-2-2": SingleRegistrationTable,
  "6-3-1": Equipmentoperation,
  "6-3-2": Send_back_t,
  "6-3-3": SendBack,
  "6-2-3": SingleRegistration,
  "6-2-4": PartSingleRegister,
  "6-2-5": PartSingleInfo,
  "6-2-6": PartSingleAlterInfo,
  "6-2-7": BaseRackAlter,
  "7-1-1": ComponentGroupSetting,
  "7-1-2": ComponentGroupUpdate,
  "7-1-3": ComponentSingleStatus,
  "8-1-1": GrindingProcessStandard,
  "8-1-2": ReplaceProcessStandards,
  "8-1-3": ProductRollerRoughnessSettingMainController,
  "9-1-1": WorkOrderPlan,
  "9-1-2": WOPlan,
  "9-1-3": WoPalnDemo,
  "9-1-4": WoPlanInstall,
  "9-1-5": WoPlanUninstall,
  "9-1-6": GrindRequest,
  "9-1-7": WoReportInstall,
  "9-1-8": WoReportUninsta,
  "9-1-9": WOPlanGrind,
  "9-1-10": WOReportGrind,
  "9-1-11": RepairRequestInfo,
  "9-1-12": RepairOutInfo,
  "9-1-13": RepairArrivalInfo,
  "9-1-14": WoPlanGpd,
  "9-2-1": GrindingWorkOrder,
  "9-2-2": OutsourcingResult,
  "9-2-3": OutsourcingStorage,
  "9-3-1": AbnormalApplication,
  "9-3-2": RepairApplication,
  "9-3-3": RepairOutsourcing,
  "9-4-1": EntrustRequest,
  "9-4-2": EntrustOut,
  "9-4-3": EntrustArrival,
  "9-5-1": NGRequest,
  "9-5-2": NGJudge,
  "9-5-3": NGSign,
  "9-5-5": NGReviewPerson,
  "9-6-1": WOTeamDuty,
  "10-1-1": ItemReport,
  "10-1-2": ItemReportDemo,
  "10-1-3": PartsListReport,
  "10-1-4": ComponentSingleReport,
  "10-1-5": PcbReport,
  "10-1-6": PshoReport,
  "10-1-7": PsrReport,
  "10-1-8": GrindPoolFinish,
  "10-1-9": GrindPool,
  "9-7-1": QrCodeGeneration,
  "11-1-1": ScrapCharged,
  "11-1-2": ScrappedSale,
  "12-1-1": ProcessFlow,
  "12-1-2": ProcessReport,
};

const handleItemClick = (index) => {
  const componentKey = index.index;
  const Component = componentMappings[componentKey];
  const syncComponents = [
    "SendBack",
    "WoPlanInstall",
    "WoReportInstall",
    "WoPlanUninstall",
    "WoReportUninsta",
    "GrindRequest",
  ];
  if (Component) {
    if (syncComponents.includes(Component.__name)) {
      //  const tabContent = `Content for ${index}`;

      const Component1 = componentMappings["6-3-3"];
      currentComponent.value = Component1;
      cachedComponents.value.push(Component1.__name);
      const tabName1 = Component1.__name;
      const title1 = "送回/领回/*";
      addTab(tabName1, title1);

      // const Component2 = componentMappings["9-1-4"];
      // currentComponent.value = Component2;
      // cachedComponents.value.push(Component2.__name);
      // const tabName2 = Component2.__name;
      // const title2 = "安装计划";
      // addTab(tabName2, title2);

      const Component3 = componentMappings["9-1-7"];
      currentComponent.value = Component3;
      cachedComponents.value.push(Component3.__name);
      const tabName3 = Component3.__name;
      const title3 = "安装填报";
      addTab(tabName3, title3);

      // const Component4 = componentMappings["9-1-5"];
      // currentComponent.value = Component4;
      // cachedComponents.value.push(Component4.__name);
      // const tabName4 = Component4.__name;
      // const title4 = "拆卸计划";
      // addTab(tabName4, title4);

      const Component5 = componentMappings["9-1-8"];
      currentComponent.value = Component5;
      cachedComponents.value.push(Component5.__name);
      const tabName5 = Component5.__name;
      const title5 = "拆卸填报";
      addTab(tabName5, title5);

      const Component6 = componentMappings["9-1-6"];
      currentComponent.value = Component6;
      cachedComponents.value.push(Component6.__name);
      const tabName6 = Component6.__name;
      const title6 = "送磨";
      addTab(tabName6, title6);

      return;
    }
    currentComponent.value = Component;
    cachedComponents.value.push(Component.__name);
    //  const tabContent = `Content for ${index}`;
    const tabName = Component.__name;
    const title = index.menuName;
    addTab(tabName, title);
  }
};

const handleOpen = (key: string, keyPath: string[]) => {};
const handleClose = (key: string, keyPath: string[]) => {};
// 计算高度
const dynamicHeight = ref(null);
const elTabsWidth = ref(null);

const getScreenHeight = () => {
  dynamicHeight.value = `${window.innerHeight - 42}px`;
};
const screenWidth = ref(window.innerWidth);
const handleResize = () => {
  screenWidth.value = window.innerWidth;
  elTabsWidth.value = `${screenWidth.value - 150}px`;
};
handleResize();
getScreenHeight();
</script>
<style scoped>
/* 悬停 */
/* #f9f9fc, #fef5f0 */
.el-table {
  /* --el-table-row-hover-bg-color: rgba(0, 158, 250, 0.219) !important; */
  /* --el-table-row-hover-bg-color: #fef5f0 !important; */
  --el-table-row-hover-bg-color: rgba(254, 245, 240, 0.8) !important;
}
.custom-dialog {
  position: fixed;
  top: 12%;
  left: 50%;
  width: 20%;
  /* 其他样式... */
}

/* 侧边树状 */
::v-deep .el-tree-node__content {
  /* height: 45px; */
  height: 4vh;
  line-height: inherit;
}
.title {
  font-size: 18px;
}
.demo-pagination-block {
  float: right;
}
::v-deep .el-table .cell {
  padding: 0;
}
::v-deep .el-header {
  padding: 0;
}
.flex-grow {
  flex-grow: 1;
}
.demo-basic .block:not(:last-child) {
  border-right: 1px solid var(--el-border-color);
}
.demo-basic .block {
  flex: 1;
}
.custom-svg-bc {
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path fill="currentColor" d="M317.056 128 128 344.064V896h768V344.064L706.944 128zm-14.528-64h418.944a32 32 0 0 1 24.064 10.88l206.528 236.096A32 32 0 0 1 960 332.032V928a32 32 0 0 1-32 32H96a32 32 0 0 1-32-32V332.032a32 32 0 0 1 7.936-21.12L278.4 75.008A32 32 0 0 1 302.528 64z"/><path fill="currentColor" d="M64 320h896v64H64z"/><path fill="currentColor" d="M448 327.872V640h128V327.872L526.08 128h-28.16zM448 64h128l64 256v352a32 32 0 0 1-32 32H416a32 32 0 0 1-32-32V320z"/></svg>')
    center/contain no-repeat;
  width: 24px; /* 设置图标的宽度 */
  height: 24px; /* 设置图标的高度 */
}
.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}
::v-deep .el-tabs--card > .el-tabs__header {
  border: none;
}
/* 标签页样式修改 */
::v-deep .demo-tabs .el-tabs__item {
  height: 42px;
}
/* 悬浮标签页 */
::v-deep .demo-tabs .el-tabs__item:hover {
  color: #409eff;
  background-color: rgb(230 230 230);
}
/* 鼠标点击后页签样式 */
::v-deep .demo-tabs .el-tabs__item.is-active {
  color: #409eff;
  background-color: rgb(230 230 230);
}
::v-deep .el-popover {
  height: 100%;
}
::v-deep .sub-sub-menu {
  display: flex;
  flex-wrap: wrap;
}

::v-deep .sub-sub-menu > div {
  flex: 0 0 50%; /* 每行最多三个，自动换行 */
  box-sizing: border-box;
  padding: 5px;
}
::v-deep .sub-sub-menu:hover {
  cursor: pointer;
}

.el-menu-item {
  padding: 0;
}
::v-deep .el-menu-item:hover {
  background-color: rgb(187 255 255);
}
.submenu-item2:hover {
  background-color: rgb(255 250 205);
}
.submenu-item3:hover {
  background-color: rgb(187 255 255);
}
</style>
